import { Handle, Position, useReactFlow } from "@xyflow/react";
import { useCallback, useState } from "react";

function NumberInput({ id, data }) {
  const [number, setNumber] = useState(data.value);
  const { updateNodeData } = useReactFlow();

  const handleInputChange = useCallback(
    (evt) => {
      const cappedNumber = Math.round(
        Math.min(255, Math.max(0, evt.target.value))
      );
      setNumber(cappedNumber);
      updateNodeData(id, { value: cappedNumber });
    },
    [setNumber, id, updateNodeData]
  );

  return (
    <div className="number-input">
      <div>{data.label}</div>
      <input
        value={number}
        id={`number-${id}`}
        name="number"
        type="number"
        min="0"
        max="255"
        className="nodrag"
        onChange={handleInputChange}
      />
      <Handle type="source" position={Position.Right} />
    </div>
  );
}
export default NumberInput;
